<html>
<head>
    <title>生成下拉列表</title>
    <meta charset="UTF-8">
    <script type="text/javascript">
        ids = new Array(1, 2, 3, 4, 5, 6);
        labs = new Array("北京", "成都", "南京", "广州", "深圳", "洛阳");
        window.onload = function () {    // 加载事件进行处理
            document.getElementById("fillbut").addEventListener("click", function () {
                // 如果要想进行元素的填充，一定要首先获取父元素
                cityObject = document.getElementById("city"); // 下拉列表框对象
                removeOptionElement();
                for (x = 0; x < ids.length; x++) {
                    optionElement = document.createElement("option"); // 创建新元素
                    optionElement.setAttribute("value", ids[x]); // 设置元素属性
                    optionElement.appendChild(document.createTextNode(labs[x])); // 添加文本元素
                    cityObject.appendChild(optionElement); // 添加子元素
                }
            }, false);
        }

        function removeOptionElement() {    // 定义一个删除元素的函数
            cityObject = document.getElementById("city"); // 下拉列表框对象
            optionList = cityObject.getElementsByTagName("option"); // 获取全部的option
            count = optionList.length; // 首先获取长度
            for (x = 0; x < count - 1; x++) {
                cityObject.removeChild(optionList[1]); // 保留第0个元素
            }
        }
    </script>
</head>
<body>
<div>你喜欢的城市：
    <select id="city">  <!-- 一定要定义下拉列表框 -->
        <option value="">================= 请选择你喜欢的城市 =================</option>
    </select>
    <button id="fillbut">填充下拉列表框内容</button>
</div>
</body>
</html>
